<script setup lang="ts">
import { defineProps, ref,defineEmits } from 'vue'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
const showHomeBtn = ref(0)
const emits = defineEmits(['gosearch'])
onLoad((options: any) => {
  // debugger
  if (options.showHomeBtn == 1) {
    showHomeBtn.value = 1
   
  }

  
})
let props = defineProps({
  autoBack: {
    type: Boolean,
    default: false
  },
  enableBack: {
    type: Boolean,
    default: true
  },
  from_url: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: Boolean,
    default: true
  },
  showLeft: {
    type: Boolean,
    default: true
  },

})

const backToHome = () => {
  uni.switchTab({
    url: `/pages/index/index`
  })
}

const naviBack = () => {
  // debugger
  if(showHomeBtn.value == 1){
    uni.reLaunch({
    url: `/pages/index/index`
  })
  }else{
    uni.navigateBack()
  }
  
}

const toSearch = ()=>{

  // debugger
  emits('gosearch')
}


</script>

<template>
  <u-navbar bgColor="transparent" height="90rpx"  >
    
    <template #left >
      <view class="u-nav-slot casu" v-if="showHomeBtn == 1 || showLeft" >
        <!-- <view style="width: 10rpx;"></view> -->
        <view class="buttons-layout">
          <u-icon :name="showHomeBtn == 1 ? 'home':'arrow-left'" size="20" @click="naviBack"></u-icon>
          
          <view class="flex-1">
            
          <u-line direction="col"></u-line>
          </view>

          <u-icon name="search" size="20" @tap="toSearch"></u-icon>
         
          
        
        
     
        </view>
      </view>
     
    </template>
    
  </u-navbar>
</template>

<style scoped lang="scss">
$size: 22rpx;
$font-size: 22rpx;

.center {
  position: relative;
  color: #ed680e;
  font-weight: bold;
  font-size: 36rpx;

  .r {
    position: absolute;
    font-size: $font-size;
    //font-weight: normal;
    //font-family: "Apple Color Emoji";
    right: -28rpx;
    top: -4rpx;
    display: inline-block;
    width: $size;
    height: $size;
    border: 2rpx solid #ed680e;
    border-radius: 50%;
    text-align: center;
    line-height: $size;
  }
}
.casu{
  display: flex;
  width: 40vw;
}
.buttons-layout{
  background-color: #f3f3f3;
  border-radius:30rpx;
  padding: 10rpx 0rpx;
  width: 160rpx; 
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  align-items: center;

  border: 2rpx solid #d3d3d3;
  .flex-1{
    // width: ;;
    height: 100%;
    width: 10rpx;
  }
}
</style>
